<script setup>
import {ref} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElMessage} from 'element-plus';
import axios from 'axios';
import router from "@/router/index.ts";


// 表单数据
const formData = ref({
  username: '',
  password: '',
});

// 提交表单
const submitForm = () => {
  // 验证表单数据是否全部填写
  if (!formData.value.username || !formData.value.password) {
    ElMessage.warning('用户名和密码都不能为空哦');
    return; // 阻止表单提交
  }

  console.log('提交表单数据：', formData.value);
  const postData = {
    username: formData.value.username,
    password: formData.value.password,
  };

  axios.post('/user/login', postData)
      .then(response => {
        console.log('Success:', response.data.data);
        const userLoginVO = response.data.data;
        ElMessage.success("登录成功");
        // 存储token，这里假设存储到localStorage
        localStorage.setItem('token', userLoginVO.token);
        localStorage.setItem('username', userLoginVO.username);
        localStorage.setItem('id', userLoginVO.id);
        localStorage.setItem('isShow', 'true')
        console.log('token:', localStorage.getItem('token'));
        // 登录成功后跳转到主页
        router.push('/user/home')
      })
      .catch(error => {
        console.error('Error:', error);
        ElMessage.error("用户名或密码错误哦");
      });
};
</script>
<script>
import axios from "axios";
import router from "@/router/index.ts";

export default {
  data() {
    return {
      baseUrl: 'http://121.199.30.8:8080'
    }
  },
  mounted() {
    this.testHello();
    document.title = "Information Sharing Platform";
  },
  methods: {
    testHello() {
      const url = this.baseUrl + "/user/test";
      axios.get(url).then(res => {
        console.log('res', res.data);
      }).catch(err => {
        console.log('err', err);
      })
    },
    goToRegister() {
      router.push('/user/register');
    }
  }
}
</script>

<template>
  <div id="login">
    <div id="contain">
      <div id="left_card">
        <h1>Welcome Back</h1>
      </div>
      <div id="right_card">
        <el-card class="el-card">
          <h2>欢迎登录</h2>
          <form action="" class="login">
            <input v-model="formData.username" v-shake placeholder="请输入账号" type="text">
            <input v-model="formData.password" v-shake placeholder="请输入密码" type="password">
          </form>
          <div class="remember">
            <input id="psd" class="radio" name="" type="radio"><label for="psd"></label>记住密码
          </div>
          <!--          <div class="message">-->
          <!--            <span v-html="error"></span>-->
          <!--          </div>-->

          <div id="btn">
            <button class="loginbtn" @click="submitForm">登陆</button>
          </div>
          <div style=" height: auto; margin-bottom:23px;transform: translate(0, 30px)">
            <el-link type="success" @click="goToRegister">注册账号</el-link>
          </div>
        </el-card>
      </div>
    </div>

  </div>
</template>

<style lang="less" scoped>
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.apply-shake {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both !important;
}

@keyframes animate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

#login {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url(./../assets/login_background.jpg);
  background-size: 100% 100%;
  background-color: #a7a8bd;

  #contain {
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    border: 1px solid black;
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    box-shadow: -5px -5px 10px rgb(39, 65, 65),
    5px 5px 20px aqua;
    /* 5秒 infinite循环播放无限次 linear匀速  */
    animation: animate 5s linear infinite;
  }
}

#contain {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;

  #left_card {
    width: 500px;

    h1 {
      color: white;
      white-space: nowrap;
    }

    span {
      font-size: 1.2rem;
      text-align: center;
      color: white;
      white-space: nowrap;
    }
  }

  #right_card {
    width: 400px;

    .el-card {
      margin: 0 45px;
      border-radius: 25px;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}

#right_card {
  display: flex;
  justify-content: center;
  align-items: center;

  h2 {
    margin-bottom: 5px;
  }

  .login {
    input {
      width: 80%;
      height: 45px;
      margin-top: 10px;
      border: 1px solid white;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      font-size: inherit;
      padding-left: 20px;
      outline: none;
    }
  }

  .remember {
    float: right;
    height: 26px;
    text-align: center;
    font-size: 1rem;
    position: relative;

    .radio {
      height: 1rem;
      width: 1rem;
      vertical-align: middle;
      margin-top: -2px;
      opacity: 0;
    }

    label {
      position: absolute;
      left: -2px;
      top: 5px;
      height: 1rem;
      width: 1rem;
      vertical-align: middle;
      margin-top: -2px;
      border-radius: 50%;
      border: 1px solid black;
    }

    //radio选中后修改labe内的内容 :after 选择器在被选元素的内容后面插入内容。
    input:checked + label::after {
      content: "";
      width: 0.6rem;
      height: 0.6rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: rgba(207, 38, 38, 0.8);
      border: 1px solid rgba(207, 38, 38, 0.8);
    }
  }

  .message {
    margin-top: 26px;
    font-size: 0.9rem;
    color: red;
    display: grid;
  }

  .loginbtn {
    width: 100%;
    height: 35px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: rgba(207, 38, 38, 0.8);
  }

}
</style>
